<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        html, body {
            text-align: center;
            vertical-align: middle;
            background-color: black;
            color: azure;
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            position: absolute;
        }

        #background {
            width: 100%;
            height: 100%;
        }

        #background img {
            vertical-align: top; /*解决ie浏览器背景填充时的空隙*/
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        div {
            position: absolute;
        }

        #content {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .snapshot {
            position: relative;
            display: flex;
            width: 70%;
            margin: 0 auto;
            height: 100px;
            border-radius: 10px;
            border: #f2f2f2 solid 5px;
            margin-top: 10px;
            background-color: rgba(128, 128, 128, 0.5);
        }

        .snapshot:hover {
            background-color: rgba(128, 128, 128, 1);
        }

        .snapshot-content {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .recordInfo {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .mapInfo {
            top: 10px;
            left: 10px;
            position: absolute;
        }

        .roleInfo {
            bottom: 15px;
            left: 120px;
        }

    </style>
</head>
<body>

<div class="container">

    <div id="background">
        <img src="../../img/battlebacks1/Castle1.png">
    </div>

    <div id="content">
    </div>

    <div id="top_button"></div>

    <div id="bottom_button"></div>
</div>

<script>

    $$$.loadSnapshots();

    function createSnapshot(id, data) {
        let snapshotId = parseInt(id) + 1;
        let content = document.getElementById("content");
        let snapshot = document.createElement("div");
        snapshot.setAttribute("id", "snapshot-" + id);
        snapshot.setAttribute("class", "snapshot")
        content.append(snapshot);
        snapshot.onclick = function () {
            $$$.loadGame(snapshotId);
            $$$.pageCurrent.hide();
        }

        let snapshotContent = document.createElement("div");
        snapshotContent.setAttribute("class", "snapshot-content")
        snapshot.appendChild(snapshotContent);

        let mapInfo = createMapInfo(data.title);
        snapshotContent.appendChild(mapInfo);

        let roleInfo = createRoleInfo(data.characters);
        snapshotContent.appendChild(roleInfo);

        let recordInfo = createRecordInfo(data.playtime);
        snapshotContent.appendChild(recordInfo);
    }

    function createRecordInfo(time) {
        let record = document.createElement("div");
        record.setAttribute("class", "recordInfo")
        record.innerHTML = "游戏时长：" + time;
        return record;
    }


    function createRoleInfo(data) {
        let roleInfo = document.createElement("div");
        roleInfo.setAttribute("class", "roleInfo")

        for (let i = 0; i < data.length; i++) {
            let character = data[i];
            $$$.getCharacter(character[0], character[1], function (src) {
                let image = new Image();
                image.src = src;
                this.append(image);
            }.bind(roleInfo));
        }
        return roleInfo;
    }

    function createMapInfo(title) {
        let mapInfo = document.createElement("div");
        mapInfo.setAttribute("class", "mapInfo")
        mapInfo.innerHTML = "地图：" + title;
        return mapInfo;
    }

    for (let snapshotKey in $$$.snapshots) {
        let snapshot = $$$.snapshots[snapshotKey];
        if (snapshot) {
            createSnapshot(snapshotKey, snapshot)
        }
    }

    console.log($$$.snapshots)
</script>

</body>
</html>